<template>
  <div style="margin:30px;margin-top:1px"  class="container">
     <el-row >
      <el-col  :span="4">
        <!-- @click="open()" -->
        <el-button  style="padding-left:50px;padding-right:50px;height:30px;line-height:0"   type="primary" @click="back" plain>返回</el-button>
      </el-col>
    </el-row>
    <h3 style="margin-top:30px">举报信息</h3>
    <el-row >
      <el-col :span="12">
        <el-row class="totality">
          <el-col  :span="8">
            <div class="l-top-50 grid-content bg-purple">机构名称</div>
          </el-col>
          <el-col :span="16">
            <div class="r-top-50-0 grid-content bg-purple">{{detailData.firmName  || '/'}}</div>
          </el-col>
        </el-row>
        <el-row class="totality">
          <el-col :span="8">
            <div class="l-50 grid-content bg-purple">培训类型</div>
          </el-col>
          <el-col :span="16">
            <div class="r-50-0 grid-content bg-purple">{{detailData.trainingType  || '/'}}</div>
          </el-col>
        </el-row>
        <el-row class="totality">
          <el-col :span="8">
            <div class="l-50 grid-content bg-purple">教师姓名</div>
          </el-col>
          <el-col :span="16">
            <div class="r-50-0 grid-content bg-purple">{{detailData.teacherName || '/'}}</div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row class="totality">
          <el-col :span="8">
            <div class="l-top-50 grid-content bg-purple">举报类型</div>
          </el-col>
          <el-col :span="16">
            <div class="r-top-50 grid-content bg-purple">{{detailData.complaintType  || '/'}}</div>
          </el-col>
        </el-row>
        <el-row class="totality">
          <el-col :span="8">
            <div class="l-50 grid-content bg-purple">举报时间</div>
          </el-col>
          <el-col :span="16">
            <div class="r-50 grid-content bg-purple">{{detailData.createTime}}</div>
          </el-col>
        </el-row>
        <el-row class="totality">
          <el-col :span="8">
            <div class="l-50 grid-content bg-purple">所在班级</div>
          </el-col>
          <el-col :span="16">
            <div class="r-50 grid-content bg-purple">{{detailData.belongClass || '/'}}</div>
          </el-col>
        </el-row>
      </el-col>
      <el-row class="totality">
        <el-col  :span="4">
          <div class="l-50 grid-content bg-purple">举报标题</div>
        </el-col>
        <el-col :span="20">
          <div class="r-50 grid-content bg-purple">机构A涉及违规收费</div>
        </el-col>
      </el-row>
    </el-row>

    <el-row class="totality" >
      <el-col  :span="4">
        <div class="l-150 grid-content bg-purple" >举报内容</div>
      </el-col>
      <el-col :span="20">
        <div  class="r-150 grid-content bg-purple">{{detailData.title}}</div>
      </el-col>
    </el-row>
    <el-row class="totality" style="height: 200px">
      <el-col  :span="4" style="height: 100%">
        <div class="left-l grid-content bg-purple  r-150" style="height: 100%">附件内容</div>
      </el-col>
      <el-col :span="20">
        <div  class="grid-content bg-purple r-200 " style="border-bottom: 1px solid #e1e8ef;">
           <!-- 如果既有图片又有压缩包格式 -->
          <div v-if="zipShow==2" style="display:flex;align-items:center">
            <div style="margin-top:10px;padding-left:10px;display:inline-block;display:flex;height:170px;">
               <el-image  v-for="(v,i) in urlListData"  :key="i" style="margin-right:20px;padding-left:10px; padding-bottom:20px" :src="v.url" alt="" :preview-src-list="[v.url]"> </el-image>
            </div>
            <div  v-for="(item,index) in urlListDataZip " :key="index" style="display:flex;margin-right:20px;display:inline-block;margin-left:10px;">
              <img v-if="item.name==='.zip'" style="width:50px;height:50px;" src="../../assets/img/zip.png" alt="">
              <img v-if="item.name==='.doc' || item.name==='.docx'"  style="width:50px;height:50px;" src="../../assets/img/word.png" alt=""> 
              <img v-if="item.name==='.xls' || item.name==='.xlsx'" style="width:50px;height:50px;" src="../../assets/img/excel.png" alt="">
              <img v-if="item.name==='.pdf'" style="width:50px;height:50px;" src="../../assets/img/ppt.png" alt="">
              <div class="down" @click="down(item.url)">
                <span>下载</span>
              </div>
            </div>
          </div>
          <!-- 只有压缩包格式 -->
          <div v-if="zipShow==1" style="display:inline-block;margin-top:10px;padding-left:10px">
            <div   v-for="(item,index) in urlListDataZip " :key="index" style="display:flex;margin-right:20px">
              <img v-if="item.name==='.zip'" style="width:50px;height:50px;" src="../../assets/img/zip.png" alt="">
              <img v-if="item.name==='.doc' || item.name==='.docx'"  style="width:50px;height:50px;" src="../../assets/img/word.png" alt=""> 
              <img v-if="item.name==='.xls' || item.name==='.xlsx'" style="width:50px;height:50px;" src="../../assets/img/excel.png" alt="">
              <img v-if="item.name==='.pdf'" style="width:50px;height:50px;" src="../../assets/img/ppt.png" alt="">
              <div class="down" @click="down(item.url)" style="padding-top:20px">
                <span>下载</span>
              </div>
            </div>
          </div>
          <!-- 只有图片格式 -->
          <div  v-if="zipShow==0" style="display:flex">
            <div  v-for="(item,index) in urlListData " :key="index" style="display:flex;margin-right:20px;width:170px;height:170px;">
            <el-image   :src="item.url" alt="" :preview-src-list="[item.url]"> </el-image>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="totality" style="height: 200px">
      <el-col  :span="4" style="height: 100%">
        <div class="grid-content bg-purple l-200" style="height: 100%">校外培训服务合同</div>
      </el-col>
      <el-col :span="20">
        <div class="grid-content bg-purple r-200 " style="border-bottom: 1px solid #e1e8ef;">
           <!-- 如果既有图片又有压缩包格式 -->
            <div v-if="protocolinformShow==2" style="display:flex;align-items:center">
              <div style="margin-top:10px;padding-left:10px;display:inline-block;display:flex;height:170px;">
                <el-image  v-for="(v,i) in informListProtocolData"  :key="i" style="margin-right:20px;padding-left:10px; padding-bottom:20px" :src="v.url" alt="" :preview-src-list="[v.url]"> </el-image>
              </div>
              <div  v-for="(item,index) in informListProtocolDataZip " :key="index" style="display:flex;margin-right:20px;display:inline-block;margin-left:10px">
                <img v-if="item.name==='.zip'" style="width:50px;height:50px;" src="../../assets/img/zip.png" alt="">
                <img v-if="item.name==='.doc' || item.name==='.docx'"  style="width:50px;height:50px;" src="../../assets/img/word.png" alt=""> 
                <img v-if="item.name==='.xls' || item.name==='.xlsx'" style="width:50px;height:50px;" src="../../assets/img/excel.png" alt="">
                <img v-if="item.name==='.pdf' || item.name==='.pptx'" style="width:50px;height:50px;" src="../../assets/img/ppt.png" alt="">
                <div class="down" @click="down(item.url)">
                  <span>下载</span>
                </div>
              </div>
            </div>
            <!-- 只有压缩包格式 -->
            <div v-if="protocolinformShow==1" style="display:inline-block;margin-top:10px;padding-left:10px">
              <div   v-for="(item,index) in informListProtocolDataZip " :key="index" style="display:flex;margin-right:20px">
                <img v-if="item.name==='.zip'" style="width:50px;height:50px;" src="../../assets/img/zip.png" alt="">
                <img v-if="item.name==='.doc' || item.name==='.docx'"  style="width:50px;height:50px;" src="../../assets/img/word.png" alt=""> 
                <img v-if="item.name==='.xls' || item.name==='.xlsx'" style="width:50px;height:50px;" src="../../assets/img/excel.png" alt="">
                <img v-if="item.name==='.pdf' || item.name==='.pptx'" style="width:50px;height:50px;" src="../../assets/img/ppt.png" alt="">
                <div class="down" @click="down(item.url)" style="padding-top:20px">
                  <span>下载</span>
                </div>
              </div>
            </div>
            <!-- 只有图片格式 -->
            <div  v-if="protocolinformShow==0" style="display:flex">
              <div  v-for="(item,index) in informListProtocolData " :key="index" style="display:flex;margin-right:20px;padding-left:10px;width:170px;height:170px">
               <el-image    :src="item.url" alt="" :preview-src-list="[item.url]"> </el-image>
              </div>
            </div>
        </div>
      </el-col>
    </el-row>
    <h3 style="margin-top:30px">举报人信息</h3>
    <el-row >
      <el-col :span="12">
        <el-row class="totality">
          <el-col  :span="8">
            <div class="l-top-50 grid-content bg-purple">姓名</div>
          </el-col>
          <el-col :span="16">
            <div class="r-top-50-0 grid-content bg-purple">{{detailData.userName  || '/'}}</div>
          </el-col>
        </el-row>
        <el-row class="totality">
          <el-col :span="8">
            <div class="l-bottom-50 grid-content bg-purple">电话</div>
          </el-col>
          <el-col :span="16">
            <div class="r-bottom-50-0 grid-content bg-purple">{{detailData.userPhone  || '/'}}</div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row class="totality">
          <el-col :span="8">
            <div class="l-top-50 grid-content bg-purple">身份证号</div>
          </el-col>
          <el-col :span="16">
            <div class="r-top-50 grid-content bg-purple">{{detailData.idCard  || '/'}}</div>
          </el-col>
        </el-row>
        <el-row class="totality">
          <el-col :span="8">
            <div class="l-bottom-50 grid-content bg-purple">邮箱</div>
          </el-col>
          <el-col :span="16">
            <div class="r-bottom-50 grid-content bg-purple">{{detailData.userEmail  || '/'}}</div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <h3 style="margin-top:30px">核实信息</h3>

    <el-row >
      <el-col :span="12">
        <el-row class="totality">
          <el-col  :span="8">
            <div class="l-top-50 grid-content bg-purple">是否属实</div>
          </el-col>
          <el-col :span="16">
            <div class="r-top-50-0 grid-content bg-purple">{{detailData.auditResult==0?'否':'是'}}</div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row class="totality">
          <el-col :span="8">
            <div class="l-top-50 grid-content bg-purple">核实人</div>
          </el-col>
          <el-col :span="16">
            <div class="r-top-50 grid-content bg-purple">{{detailData.auditUser || '/'}}</div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="totality">
      <el-col  :span="4">
        <div class="l-50 grid-content bg-purple">核实时间</div>
      </el-col>
      <el-col :span="20">
        <div class="r-bottom-50 grid-content bg-purple">{{detailData.auditTime || '暂无时间'}}</div>
      </el-col>
    </el-row>

    <el-row class="totality">
      <el-col  :span="4">
        <div class="l-bottom-150 grid-content bg-purple">核实建议</div>
      </el-col>
      <el-col :span="20">
        <div class="r-bottom-150 grid-content bg-purple">{{detailData.auditSuggest || '暂无建议'}}</div>
      </el-col>
    </el-row>

    <h3 style="margin-top:30px">执法信息</h3>
    <el-form v-if="this.$route.params.id === '1'" ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px"  @keyup.enter.native="dataFormSubmit()">
      <el-form-item label="执法单位" prop="field102" :rules="rules.field102">
        <el-input v-model="formData.field102" placeholder="请输入执法单位" clearable :style="{width: '100%'}" @input="field102InputChange"></el-input>
      </el-form-item>

      <el-form-item label="执法意见" prop="field101"  :rules="rules.field101">
        <el-input v-model="formData.field101" type="textarea" placeholder="请输入执法意见"
                  :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}" @input="field101InputChange"></el-input>
      </el-form-item>

      <el-form-item label="执法附件" prop="lawUrlList" >
        <el-upload 
          ref="lawUrlList"
          :limit="5"
          :on-exceed="masterFileMax"
          :action="urlRes"
          :on-success="handlePreviewUrlList"
          :on-remove="handleRemoveUrlList"
          :before-upload="handleBeforeUploadUrlList"
          >
          <el-button  size="small" style="height:30px;padding-left:30px;padding-right:30px;color:#1B89F0;line-height:0" icon="el-icon-upload">点击上传</el-button>
          <div slot="tip" style="display: inline-block;margin-left:20px;color:#B8B8B8" class="el-upload__tip">支持jpg、png、jpeg,pdf、doc、docx、xlsx、zip、pptx文件,且不超过2M</div>
        </el-upload>
      </el-form-item>
    </el-form>

    <el-form v-if="this.$route.params.id === '2'" ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-row v-if="this.$route.params.id === '2'|| this.$route.params.id === 'Y'" class="totality">
        <el-col  :span="4">
          <div class="left-l grid-content bg-purple">执法单位</div>
        </el-col>
        <el-col :span="8">
          <div class="right-r grid-content bg-purple">{{detailData.lawCompany}}</div>
        </el-col><el-col  :span="4">
          <div class="left-l grid-content bg-purple">执法人</div>
        </el-col>
        <el-col :span="8">
          <div class="right-r grid-content bg-purple">{{detailData.lawPerson}}</div>
        </el-col>
      </el-row>

      <el-row v-if="this.$route.params.id === '2'" class="totality">
        <el-col  :span="4">
          <div class="left-l grid-content bg-purple">执法时间</div>
        </el-col>
        <el-col :span="20">
          <div class="right-r grid-content bg-purple">{{detailData.lawTime}}</div>
        </el-col>
      </el-row>

      <el-row v-if="this.$route.params.id === '2'" class="totality" style="height: 160px">
        <el-col  :span="4" style="height: 100%;">
          <div class="left-l grid-content bg-purple" style="height: 100%;">执法意见</div>
        </el-col>
        <el-col :span="20" style="height: 100%;">
          <div class="right-r grid-content bg-purple" style="height: 100%;">{{detailData.lawSuggest}}</div>
        </el-col>
      </el-row>

      <el-row class="totality" style="height: 200px">
        <el-col  :span="4" style="height: 100%">
          <div class="left-l grid-content bg-purple" style="height: 100%">执法附件</div>
        </el-col>
        <el-col :span="20">
          <div  class="grid-content bg-purple r-200 " style="border-bottom: 1px solid #e1e8ef;">
            <!-- 如果既有图片又有压缩包格式 -->
            <div v-if="layZipShow==2" >
              <div style="margin-top:10px;padding-left:10px;display:inline-block;width:170px;height:170px;">
                  <el-image  v-for="(v,i) in layListData"  :key="i" style="margin-right:20px;padding-left:10px; padding-bottom:20px" :src="v.url" alt="" :preview-src-list="[v.url]"> </el-image>
              </div>
              <div  v-for="(item,index) in layListDataZip " :key="index" style="display:flex;margin-right:20px;display:inline-block;margin-left:-250px">
                <img v-if="item.name==='.zip'" style="width:50px;height:50px;" src="../../assets/img/zip.png" alt="">
                <img v-if="item.name==='.doc' || item.name==='.docx'"  style="width:50px;height:50px;" src="../../assets/img/word.png" alt=""> 
                <img v-if="item.name==='.xls' || item.name==='.xlsx'" style="width:50px;height:50px;" src="../../assets/img/excel.png" alt="">
                <img v-if="item.name==='.pdf' || item.name==='.pptx'" style="width:50px;height:50px;" src="../../assets/img/ppt.png" alt="">
                <div class="down" @click="down(item.url)">
                  <span>下载</span>
                </div>
              </div>
            </div>
            <!-- 只有压缩包格式 -->
            <div v-if="layZipShow==1" style="display:inline-block;margin-top:10px;padding-left:10px">
              <div   v-for="(item,index) in layListDataZip " :key="index" style="display:flex;margin-right:20px">
                <img v-if="item.name==='.zip'" style="width:50px;height:50px;" src="../../assets/img/zip.png" alt="">
                <img v-if="item.name==='.doc' || item.name==='.docx'"  style="width:50px;height:50px;" src="../../assets/img/word.png" alt=""> 
                <img v-if="item.name==='.xls' || item.name==='.xlsx'" style="width:50px;height:50px;" src="../../assets/img/excel.png" alt="">
                <img v-if="item.name==='.pdf' || item.name==='.pptx'" style="width:50px;height:50px;" src="../../assets/img/ppt.png" alt="">
                <div class="down" @click="down(item.url)" style="padding-top:20px">
                  <span>下载</span>
                </div>
              </div>
            </div>
            <!-- 只有图片格式 -->
            <div  v-if="layZipShow==0">
              <div  v-for="(item,index) in layListData " :key="index" style="display:flex;margin-right:20px;padding-left:10px;width:170px;height:170px;">
                <el-image   :src="item.url" alt="" :preview-src-list="[item.url]"> </el-image>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <el-row style="margin-top: 80px">
      <el-col  :span="10">
        <div>&nbsp;</div>
      </el-col>
      <el-col  :span="6">
        <!-- @click="open()" -->
        <el-button style="padding-left:50px;padding-right:50px;height:30px;line-height:0"  v-if="this.$route.params.id === '1'"   type="primary"  @click="dataFormSubmit()">确定</el-button>
        <el-button style="padding-left:50px;padding-right:50px;height:30px;line-height:0" type="primary" @click="$router.push({ name: 'enforce' })" plain>返回</el-button>
      </el-col>
      <el-col :span="10">
        <div>&nbsp;</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>


  export default {
    data() {
      return {
        // 上传附件图片格式 .jpg|.jpeg|.png|.doc|.docx|.xls|.xlsx|.pdf
        imageEGP:'',
         // 上传地址
        urlRes:'http://jypt.jqctech.com:8080/renren-fast/sys/oss/upload',
        formData: {
          // 执法单位
          field102: '',
          // //执法意见
          field101: '',
          field104: null,
          lawUrlList: [],
        },
        fileList:[],
        // 表单校验规则
        rules: {
          field102: [
              { required: true, message: '请输入执法单位', trigger: 'blur' },
          ],
          field101: [
              { required: true, message: '请输入执法意见', trigger: 'blur' }
          ],
          lawUrlList:[
              { required: true, message: '请上传执法附件', trigger: 'blur' }
          ]
        },
        Form: {
        },
        type: 'D',
          // 传递过来的详情数据
        detailData:{},
        // 是否属实
        radio:'',
        // 上传好的路径
        lawUrlList:[],
        // 附件压缩包url
        url:"",
        // 附件内容图片列表
        urlListData:[],
        // 附件内容压缩包列表
        urlListDataZip:[],
        // 传递过来的reportID获取详情
        reportId:'',
        // 显示图片还是其他格式附件
        zipShow:0,
        layZipShow:0,
        // 执法附件都是图片列表
        layListData:[],
        // 执法附件都是压缩包列表
        layListDataZip:[],
        // 执法附件既有图片，也有压缩包列表
        allLayListDataImg:[],
        // type: this.$route.params.type
         // 合同附件内容图片列表
        informListProtocolData:[],
        // 合同附件内容压缩包列表
        informListProtocolDataZip:[],
         // 是否显示压缩包区域
        protocolinformShow:0,
        protocollnformZipShow:0,
        tabbar:''
      }
    },
    computed: {},
    created() {
      console.log('详情页type详情页type详情页type',this.$route.params)
      this.tabbar=this.$route.params.id
      console.log('肤质后this.tabbar',this.tabbar)
      // this.type = this.$route.params.id
      // this.reportId=this.$route.params.reportId
         // 获取举报详情
      this.getDetailData(this.reportId)
    },
      // 监听路由
    watch: {
      $route: {
        deep: true,
        immediate: true,
        handler(val) {
          console.log('获取过来的执法列表路由',val)
          if(val.params!=={}){
            this.reportId=this.$route.params.reportId
          }
        }
      }
    },
    methods: {
      back(){
        let tabbar=''
        this.$router.push({ name: 'enforce',query:{tabbar:this.tabbar} })
      },
       // 获取举报详情
      getDetailData(reportId){
        this.$http({
          url: this.$http.adornUrl('/info/reportDetails?reportId='+this.reportId
          ),
          method: 'post',
          data:{}
        }).then(res=>{
          if(res.data.code==0){
            console.log('获取举报详情',res.data)
             this.detailData=res.data.data
            //  附件内容赋值
             this.getUrlChangeUrlListData(res.data.data.urlList)
            //  执法附件赋值
             this.getUrlChangeLayListData(res.data.data.lawUrlList)
             this.getProtocolUrlChangeUrlListData(res.data.data.protocolUrlList)
             console.log('this.执法附件',this.layListData)
          }
        })
      },
      // 附件内容格式化
      getUrlChangeUrlListData(url){
        if(url){
          console.log('需要处理的urllist',url)
          // 判断是否为json字符串在做解析
          if(url.indexOf("[")!= -1){
            console.log('走json')
            var img=JSON.parse(url)
            if(url.indexOf(".png")!= -1 && url.indexOf(".zip")!= -1){
              console.log('11111111',url)
              this.zipShow=2
              img.forEach((item,index)=>{
                let type=img[index].substring(img[index].lastIndexOf('.')).toLowerCase()
                if(type=='.jpg' || type=='.jpeg' ||  type=='.png'){
                  let obj={
                    name:type,
                    url:img[index]
                  }
                  this.urlListData.push(obj)
                }else {
                    let obj={
                    name:type,
                    url:img[index]
                  }
                  this.urlListDataZip.push(obj)
                }
              })
              console.log('都有',this.urlListData,this.urlListData)
            }else if(url.indexOf(".png")!= -1 || url.indexOf(".jpg")!= -1  || url.indexOf(".jpeg")!= -1 ){
              console.log('22222222',url)
              this.zipShow=0
              img.forEach((item,index)=>{
                let type=img[index].substring(img[index].lastIndexOf('.')).toLowerCase()
                let obj={
                  name:type,
                  url:img[index]
                }
                this.urlListData.push(obj)
              })
              console.log('只有图片',this.urlListData)
            }else {
              console.log('22222222',url)
              console.log('只有压缩包')
              this.zipShow=1
              let img=JSON.parse(url)
              img.forEach((item,index)=>{
                let type=img[index].substring(img[index].lastIndexOf('.')).toLowerCase()
                let obj={
                  name:type,
                  url:img[index]
                }
                this.urlListDataZip.push(obj)
              })
            }
          }else {
            console.log('没有走json')
            let arr=url.split(',')
            arr.forEach((item,index)=>{
              // 如果不是json穿格式直接push到数组里
              let type=url.substring(url.lastIndexOf('.')).toLowerCase()
               if(type=='.jpg' || type=='.jpeg' || type=='.png'){
                this.zipShow=0
                let obj={
                  name:type,
                  url:arr[index]
                }
                this.urlListData.push(obj)
              }else {
                this.zipShow=1
                let obj={
                  name:type,
                  url:arr[index]
                }
                this.urlListDataZip.push(obj)
              }
            })
            console.log('不是json穿',url,this.urlListData)
          }
        }
      },
      // 执法附件格式化
      getUrlChangeLayListData(url){
        if(url){
          console.log('执法附加转换的url',url)
          // 判断是否为json字符串在做解析
          if(url.indexOf("[")!= -1){
            console.log('执法附件走的json字符串')
            var img=JSON.parse(url)
            if(url.indexOf(".png")!= -1 && url.indexOf(".zip")!= -1){
              this.layZipShow=2
              img.forEach((item,index)=>{
                let type=img[index].substring(img[index].lastIndexOf('.')).toLowerCase()
                if(type=='.jpg' || type=='.jpeg' ||  type=='.png'){
                  let obj={
                    name:type,
                    url:img[index]
                  }
                  this.layListData.push(obj)
                }else {
                    let obj={
                    name:type,
                    url:img[index]
                  }
                  this.layListDataZip.push(obj)
                }
              })
            }else if(url.indexOf(".png")!= -1 || url.indexOf(".jpg")!= -1  || url.indexOf(".jpeg")!= -1 ){
              console.log('22222222',url)
              this.layZipShow=0
              img.forEach((item,index)=>{
                let type=img[index].substring(img[index].lastIndexOf('.')).toLowerCase()
                let obj={
                  name:type,
                  url:img[index]
                }
                this.layListData.push(obj)
              })
            }else {
              this.layZipShow=1
              let img=JSON.parse(url)
              img.forEach((item,index)=>{
                let type=img[index].substring(img[index].lastIndexOf('.')).toLowerCase()
                let obj={
                  name:type,
                  url:img[index]
                }
                this.layListDataZip.push(obj)
              })
            }
          }else {
            console.log('执法附件走的不是json字符串')
            // 如果不是json穿格式直接push到数组里
            let URL=url.split(',')
            URL.forEach((item,index)=>{
              let type=url.substring(url.lastIndexOf('.')).toLowerCase()
              if(type=='.jpg' || type=='.jpeg' || type=='.png'){
                this.layZipShow=0
                let obj={
                  name:type,
                  url:url
                }
                this.layListData.push(obj)
              }else {
                this.layZipShow=1
                let obj={
                  name:type,
                  url:url
                }
                this.layListDataZip.push(obj)
              }
            })
            console.log('最终肤质肤质',this.layListData)
          }
        }
      },
       // 合同附件内容格式化
      getProtocolUrlChangeUrlListData(url){
        if(url){
          console.log('需要转换的url',url)
          // 判断是否为json字符串在做解析
          if(url.indexOf("[")!= -1){
            console.log('走是否包含数组的1')
            var img=JSON.parse(url)
            if(url.indexOf(".png")!= -1 && url.indexOf(".zip")!= -1){
              console.log('11111111',url)
              this.protocolinformShow=2
              img.forEach((item,index)=>{
                let type=img[index].substring(img[index].lastIndexOf('.')).toLowerCase()
                if(type=='.jpg' || type=='.jpeg' ||  type=='.png'){
                  let obj={
                    name:type,
                    url:img[index]
                  }
                  this.informListProtocolData.push(obj)
                }else {
                    let obj={
                    name:type,
                    url:img[index]
                  }
                  this.informListProtocolDataZip.push(obj)
                }
              })
              console.log('都有',this.informListProtocolData,this.informListProtocolDataZip)
            }else if(url.indexOf(".png")!= -1 || url.indexOf(".jpg")!= -1  || url.indexOf(".jpeg")!= -1 ){
              console.log('22222222',url)
              this.protocolinformShow=0
              img.forEach((item,index)=>{
                let type=img[index].substring(img[index].lastIndexOf('.')).toLowerCase()
                let obj={
                  name:type,
                  url:img[index]
                }
                this.informListProtocolData.push(obj)
              })
              console.log('只有图片',this.informListProtocolData)
            }else {
              console.log('22222222',url)
              console.log('只有压缩包')
              this.protocolinformShow=1
              let img=JSON.parse(url)
              img.forEach((item,index)=>{
                let type=img[index].substring(img[index].lastIndexOf('.')).toLowerCase()
                let obj={
                  name:type,
                  url:img[index]
                }
                this.informListProtocolDataZip.push(obj)
              })
            }
          }else {
            console.log('走是否包含数组的2')
            // 如果不是json穿格式直接push到数组里
            let type=url.substring(url.lastIndexOf('.')).toLowerCase()
            console.log('type',type)
            if(type=='.jpg' || type=='.jpeg' || type=='.png'){
              this.protocolinformShow=0
              // 将字符串转换为数组
              let arr=url.split(',')
              console.log('arr',arr)
              arr.forEach(item=>{
                let obj={
                  name:type,
                  url:item
                }
                this.informListProtocolData.push(obj)
              })
              console.log('push',this.informListProtocolData)
            }else {
              this.protocolinformShow=1
              let obj={
                name:type,
                url:url
              }
                this.informListProtocolDataZip.push(obj)
            }
            console.log('不是json穿',url,this.informLisProtocoltData)
          }
        }
      },
      // 执法单位输入事件
      field102InputChange(event){
        this.formData.field102=event
      },
      // 执法意见输入事件
      field101InputChange(event){
        this.formData.field101=event

      },
      // 执法附件上传
      handlePreviewUrlList(res,file,fileList){
        this.formData.lawUrlList=fileList
        // 移除校验规则
        let formField = this.$refs["elForm"].fields;
        formField.map(i => {
          if(i.prop === 'lawUrlList'){  //通过prop属性值相同来判断是哪个输入框，比如：要移除prop为'imageUrl'
            i.clearValidate();
            return false
          }
        })
      },
       // 执法附件上传之前的校验
      handleBeforeUploadUrlList(file){
        // / 定义上传的文件格式校验
        var FileExt = file.name.replace(/.+\./, "");       
        if (['jpg','png','jpeg','zip', 'rar','pdf','doc','docx','xls','pdf','pptx'].indexOf(FileExt.toLowerCase()) === -1){            
          this.$message({ 
              type: 'warning', 
              message: '请上传后缀名为jpg、png、jpeg、pdf、doc、docx、xls、pptx,zip或rar的附件！' 
          });                
          return false;       
        }      
         const isLt2M = file.size / 1024 / 1024 < 2
        // 上传文件大小限制
        if(!isLt2M) {
          this.$message.error('上传文件大小不能超过2MB!')
          return false
        }
      },
      // 执法附件上传限制个数
      masterFileMax(files, fileList) {
        this.$message.warning(`请最多上传1-3个文件`);
      },
      // 执法附件移除
      handleRemoveUrlList(file){
        let arr = this.formData.lawUrlList.filter((item) => item.uid != file.uid);
        this.formData.lawUrlList = arr;
      },
       // 提交表单
      dataFormSubmit () {
        // 执法附件格式化
        var lawUrlList = [];
        this.formData.lawUrlList.forEach((item) => {
          lawUrlList.push(item.response.url);
        });
        var URLLIST=lawUrlList.join(',')
        this.$refs.elForm.validate((valid) => {
          console.log('获取校验的东西',valid,this.$refs.elForm)
          if (valid) {
            console.log('开始执行下一步')
            var _self=this
            this.$confirm('确定提交执法信息吗', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              center: true
            }).then(() => {
              let params={
                //  执法列表id
                reportId:_self.detailData.reportId,
                // 执法单位
                lawCompany:_self.formData.field102,
                // 执法意见
                lawSuggest:_self.formData.field101,
                // 上传的执法附件文件数组
                lawUrlList:URLLIST 
              }
              this.$http({
                url: this.$http.adornUrl('/sys/report/reportLaw'),
                method: 'post',
                data:params
              }).then(res=>{
                console.log('获去最终审核的结果结果',res.data.data)
                if(res.data.code==0){
                  this.$message({
                    type: 'success',
                    message: res.data.msg
                  });
                  this.$router.push({ name: 'enforce' ,query:{
                    status:2
                  }})
                }else {
                  this.$message({
                    type: 'error',
                    message: res.data.msg
                  });
                }
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: res.data.msg
              });
            });
          }else {
            return false
          }
        })
      },
      // open() {
      //   const imga = require("../../assets/img/审批完成2.png");
      //   this.$alert('<strong><img style="width: 70%;margin-left: 15%;" src='+ imga +'><div style="text-align: center;">完成</div></strong>', '', {
      //     dangerouslyUseHTMLString: true
      //   });
      // },
      openText() {
        this.$alert('<textarea class="textarea_border" v-model="formData.field101" rows="15" cols="50" maxlength="500" @input="descInput" placeholder="请输入拒绝原因" ></textarea> <span class="numberV" style="position: absolute; right: 15px;bottom: 2px;">' + this.txtVal + '/500</span>', '原因', {
          dangerouslyUseHTMLString: true,
          cancelButtonClass: "el-confirm"
        });
      },
      // 上传执法附件之前的校验
      field104BeforeUpload(file) {
        let isRightSize = file.size / 1024 / 1024 < 2
        if (!isRightSize) {
          this.$message.error('文件大小超过 2MB')
        }
        return isRightSize
      },
      descInput(){
        this.txtVal = this.formData.field101.length;
      },
        // 附件下载
      down(url) {
        window.open(url)
      },
    }
  }
</script>
<style scoped lang="scss">
.el-image{//覆盖原来图片的宽高。。让高度自适应
    /deep/ img{
      width: auto;
      height: auto;
      max-width: 170px;
      max-height: 170px;
      overflow: auto;
    }
  }
  .container{
    // 设置表单标题距离前面的距离
    /deep/.el-form-item__label{
      text-align: left;
      margin-left: -10px;
    }
  }

  .right-r {
    padding: 13px 13px 13px 33px;
    border: 1px solid  #e1e8ef;
    border-left: 0px solid  #e1e8ef;
  }
  .left-l {
    padding: 13px 13px 13px 33px;
    background: #ecf4fb;
    border: 1px solid  #e1e8ef;
  }
  /* 处理dilog确定于取消按钮之间的间距问题 */
  .el-message-box--center >.el-message-box__btns{
    display: flex;
    justify-content: center;
  }
  .el-message-box__btns > button:nth-child(2){
    margin-left: 20px;
  }
  .down{
    color: rgb(30, 15, 235);
    cursor: pointer;
    display: inline-block;
    align-items: center;
    padding-left: 10px;
  }
  .down>span:hover{
    border-bottom: 2px solid rgb(30, 15, 235);
  }
</style>
